<template>
  <div class="main">
    <!-- <webview ref="webviewRef"></webview> -->
    <div class="header">
      <el-popover :visible="visible" placement="bottom" :width="200" trigger="click">
        <p style="font-size: 10px;overflow: auto;max-height: 240px;">
          电脑名:<span style="color: #409eff;margin-left:5px;">{{ computerInfo.computerName }}</span> <br>
          CPU:<span style="color: #409eff;margin-left:5px;">{{ computerInfo.cpuId }}</span><br>
          硬盘:<span style="color: #409eff;margin-left:5px;">{{ computerInfo.diskSerial }}</span><br>
          网络信息[{ <br>
          <span v-for="item in computerInfo.networkDetails">
            
            ip:<span style="color: #409eff;margin-left:5px;">{{ item.ip }}</span> <br>
            mac:<span style="color: #409eff;margin-left:5px;">{{ item.mac }}</span><br>
            interface:<span style="color: #409eff;margin-left:5px;">{{ item.interface }}</span><br>
            gateway:<span style="color: #409eff;margin-left:5px;">{{ item.gateway }}</span><br>
            gatewayMac:<span style="color: #409eff;margin-left:5px;">{{ item.gatewayMac }}</span><br>
            description:<span style="color: #409eff;margin-left:5px;">{{ item.description }}</span><br>
            }
          </span>]<br>
          网络信息[{ <br>
          <span v-for="item in computerInfo.networkCardDrive">
            
            ServiceName:<span style="color: #409eff;margin-left:5px;">{{ item.ServiceName }}</span> <br>
            Description:<span style="color: #409eff;margin-left:5px;">{{ item.Description }}</span><br>
           
            }
          </span>]<br>
          <!-- <span>拼接:</span><br><span style="color: #409eff;margin-left:5px;">{{ computerInfo.fullString }}</span><br>
          <span>拼接:</span><br><span style="color: #409eff;margin-left:5px;">{{ computerInfo.getHardInfoToString }}</span><br> --> 
          <el-button size="small" type="primary" @click="generateLoginUrl">生成登录接口</el-button>
          <el-button size="small" type="primary" @click="copyLoginInfo">复制</el-button> <br>
          <span style="color: #409eff;margin-left:5px;">{{ loginUrl }}</span>
        </p>
        <div style="text-align: right; margin: 0;padding-top: 10px;">
          <el-button size="small" type="primary" @click="visible = false">
            关闭
          </el-button>
        </div>
        <template #reference>
          <div class="logo-box" @click="onClickLogo">
            <img class="logo" :src="logo" />
            <div class="app-name">
              <div class="en">FD.EAP V5.0</div>
              <div class="cn">福大自动化EAP</div>
            </div>
          </div>
        </template>
      </el-popover>

      <div class="content">
        <div class="version">
          <span>{{ version }}</span>
        </div>
      </div>
    </div>
    <slot></slot>
    <div class="footer">
      <div class="qrcode">
        <img :src="qrcode" alt="">
      </div>
      <div class="right">
        <div class="service">
          <div class="item">
            <img :src="tel" alt=""><span>客服电话:0591-38726695</span>
          </div>
          <div class="item">
            <img :src="qq" alt=""><span>客服QQ:3105705872 2475225397</span>
          </div>
        </div>
      </div>
    </div>
  </div>


</template>
<script setup>

import logo from '@/assets/images/fd-logo.png'
import tel from '@/assets/images/tel.png'
import qq from '@/assets/images/qq.png'
import qrcode from '@/assets/images/yx-qrcode.png'
import { ipc, isEE } from "@/utils/ipcRenderer";
import { ipcApiRoute } from "@/api";
import { ref, onMounted, inject } from "vue";
import { ElMessage } from 'element-plus'

const visible = ref(false)
const version = ref("")
const computerInfo = ref({})

// Inject the form data from parent component
const loginForm = inject('loginForm', { name: '', password: '' })

function getVersion() {
  if (!isEE) {
    return;
  }
  ipc.invoke(ipcApiRoute.version).then(res => {
    version.value = `版本:${res}`

  })

}

const loginUrl = ref("");
function generateLoginUrl() {
  if(loginForm.password === '' || loginForm.name === ''){
    ElMessage.error('请先输入用户名和密码');
    return;
  }
  const userName = loginForm.name
  const password = loginForm.password
  ipc.invoke(ipcApiRoute.generateLoginUrl, {userName,password}).then(res => {
    // ElMessage.success(`生成的登录URL: ${res}`);
    loginUrl.value = res;
  })
  // const baseUrl = 'fdeap://login';
  // const params = new URLSearchParams();
  
  // if (loginForm.name) {
  //   params.append('username', loginForm.name);
  // }
  
  // if (loginForm.password) {
  //   params.append('password', loginForm.password);
  // }
  
  // const fullUrl = `${baseUrl}?${params.toString()}`;
  // ElMessage.success(`生成的登录URL: ${fullUrl}`);
  // return fullUrl;
}

function copyLoginInfo() {
  const loginInfo = loginUrl.value || '请先生成登录接口';
  navigator.clipboard.writeText(loginInfo).then(() => {
    ElMessage.success('登录信息已复制到剪贴板');
  }).catch(() => {
    ElMessage.error('复制失败');
  });
}

const onClickLogo = () => {
  if (!isEE) {
    return;
  }
  ipc.invoke(ipcApiRoute.getCpmputerInfo).then(res => {
    console.log('电脑信息', res);
    computerInfo.value = res;
    visible.value = true
  })
}

//接收协议
function receivingProtocol() {
  if (!isEE) {
    return;
  }
  ipc.on('protocol-call', (event, data) => {
    console.log('收到协议调用:', data);
    // ElMessage.success("收到协议调用" + data);
  });
}
onMounted(() => {
  getVersion();
  receivingProtocol()
});
</script>
<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    height: 80px;
    background: url('@/assets/images/login-bg.jpg');
    background-size: 100% 100%;
    /* 宽度拉伸至100%，高度保持原始比例 */
    background-position: top;
    /* 从顶部开始 */
    background-repeat: no-repeat;
    padding-top: 20px;
    padding-left: 30px;
    box-sizing: border-box;


    /* 不重复 */
    .logo-box {
      display: flex;
      float: left;

      .logo {
        height: 100%;
      }

      .app-name {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;

        .en {
          font-size: 15px;
          font-weight: 600;
          color: #364873;
        }

        .cn {
          font-weight: 600;
          font-size: 8px;
        }

      }
    }

    .content {
      float: right;
      margin-right: 10px;
      display: flex;
      justify-content: right;

      .version {
        font-size: 12px;
        font-weight: 100;
        color: #fff;
      }
    }
  }

  .footer {


    box-sizing: border-box;

    padding-left: 60px;
    margin: 0 auto;

    width: 100%;
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .right {
      flex: 1;
      padding: 0 10px;

      &::before {
        display: block;
        content: '';
        height: 1px;
        width: 100%;
        background-color: #328BD0;
      }

      .service {
        margin-top: 8px;
        display: flex;
        justify-content: right;
        align-items: center;
        gap: 20px;

        .item {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

  }
}
</style>